<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="#" type="image/x-icon">
    <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">
    <title>{{i18n.title}}</title>
    <link rel="stylesheet" href="./index.css">
    <script src="/i18n.js"></script>
    <script src="./jquery.min.js"></script>

</head>

<body>
    <h1 class="textCenter">{{i18n.title}}</h1>
    <h3>{{i18n.world}}</h3>
    <ol>
        <li>
            <p>{{i18n.Q1.title}}</p>
            <ul>
                <li>{{i18n.Q1.answer.a1}}</li>
                <li>{{i18n.Q1.answer.a2}}</li>
                <li>{{i18n.Q1.answer.a3}}</li>
                <li>{{i18n.Q1.answer.a4}}</li>
                <li i18n-show>{{i18n.Q1.answer.a5}}</li>
                <li i18n-show>{{i18n.Q1.answer.a6}}</li>
                <li i18n-show>{{i18n.Q1.answer.a7}}</li>
                <li i18n-show>{{i18n.config.lang == 'en' ? '13133' : ''}}</li>
            </ul>
        </li>
        <li>
            <p>{{i18n.Q2.title}}</p>
            <ul>
                <li>{{i18n.Q2.answer.a1}}</li>
                <li>{{i18n.Q2.answer.a2}}</li>
            </ul>
        </li>
    </ol>
    <script>
        var langJson = undefined;

        $.ajaxSetup({ async: false })
        $.getJSON('/demo/data/data.json', function (res) {
            langJson = res;
        });

        i18n.init({
            resource: langJson,
        })
    </script>
</body>

</html>
